<template>
  <div class="app-container">
    <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
    <el-row style="margin-bottom:20px;">
      <el-button v-loading="exportLoading" @click="handleExport">导出Excel</el-button>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import TheQueryForm from "@/components/TheQueryForm/index.vue";
import TheTable from "@/components/TheTable/Index.vue";
import { apiMemberSignPackagePage } from "@/api/trafficPacket";
export default {
  components: { TheQueryForm, TheTable },
  data() {
    return {
      searchOption: [
        {
          field: "memberPhone",
          label: "用户手机号",
          placeholder: "用户手机号",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },
        {
          field: "alipayOrderCode",
          label: "支付宝交易流水号",
          placeholder: "支付宝交易流水号",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },
        {
          field: "contractInfoId",
          label: "借条ID",
          placeholder: "借条ID",
          required: false,
          rules: [],
          type: "Input",
          defaultValue: ""
        },
        {
          type: "Select",
          field: "status",
          label: "流量包状态",
          placeholder: "流量包状态",
          required: false,
          rules: [],
          options: [
            { label: "待使用(已支付)", value: "PAID" },
            { label: "已使用", value: "USED" },
            { label: "已过期退款", value: "EXPIRED" }
          ],
          defaultValue: ""
        },
        {
          field: "time",
          label: "支付时间",
          placeholder: "支付时间",
          required: false,
          rules: [],
          type: "DatePickerRange"
        }
      ],
      tableOption: [
        {
          label: "流量包ID",
          prop: "memberSignPackageId",
          width: 100
        },
        {
          label: "买家信息",
          prop: "alipayUserName",
          width: 200,
          render(createElement, { row }) {
            const dom = (
              <div class="row">
                <div>用户id:{row.memberId}</div>
                <div>支付宝id:{row.alipayOpenId}</div>
                <div>支付宝昵称:{row.alipayUserName}</div>
                <div>手机号:{row.memberPhone}</div>
                <div>支付宝流水号:{row.alipayOrderCode}</div>
              </div>
            );
            return dom;
          }
        },
        {
          label: "支付金额（元）",
          prop: "orderPayPrice",
          width: 60,
          formatter(row) {
            return `${Number(row.orderPayPrice).tranFormat(2, -2, true)}`;
          }
        },
        {
          label: "流量包总次数",
          prop: "totalTimes",
          width: 50
        },
        {
          label: "剩余可用次数",
          prop: "remainingTimes",
          width: 50
        },
        {
          label: "关联借条ID",
          prop: "contractInfoId"
        },
        {
          label: "流量包状态",
          prop: "status",
          width: 80, //状态: 1.待使用(已支付) 2.已使用 3.已过期退款
          render(h, { row }) {
            const { status } = row;
            if (status === "PAID") {
              return <el-link type="primary">待使用(已支付)</el-link>;
            } else if (status === "USED") {
              return <el-link type="success">已使用</el-link>;
            } else if (status === "EXPIRED") {
              return <el-link type="info">已过期退款</el-link>;
            } else {
              return "";
            }
          }
        },
        {
          label: "支付时间",
          prop: "payTime",
          width: 60,

          render(createElement, { row }) {
            try {
              const strArr = row.payTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "使用时间",
          prop: "useDateTime",
          width: 60,
          render(createElement, { row }) {
            try {
              const strArr = row.useDateTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "设定过期时间",
          prop: "expiryDateTime",
          width: 60,
          render(createElement, { row }) {
            try {
              const strArr = row.expiryDateTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "退款完成时间",
          prop: "refundTime",
          width: 70,
          render(createElement, { row }) {
            try {
              const strArr = row.refundTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        }
      ],
      queryPageApi: apiMemberSignPackagePage,
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false
    };
  },
  mounted() {},
  methods: {
    onSubmit({ values }) {
      values = {
        ...values,
        payEndTime: values.time ? values.time[1] + " 23:59:59" : "",
        payStartTime: values.time ? values.time[0] + " 00:00:00" : ""
      };
      delete values.time;

      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    },
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiMemberSignPackagePage({
        pageNo: 1,
        pageSize: -1,
        ...this.queryParams
      });
      if (res.code === 200) {
        let header = [
              {
                title: "流量包ID",
                prop: "memberSignPackageId",
                valueType: "s"
              },
              { title: "用户id", prop: "memberId", valueType: "s" },
              { title: "支付宝id", prop: "alipayOpenId", valueType: "s" },
              { title: "支付宝昵称", prop: "alipayUserName", valueType: "s" },
              { title: "手机号", prop: "memberPhone", valueType: "s" },
              {
                title: "支付宝流水号",
                prop: "alipayOrderCode",
                valueType: "s"
              },
              {
                title: "支付金额（元）",
                prop: "orderPayPrice",
                numFmt: $numFmt.money,
               
                valueType: "n"

              },
              { title: "流量包总次数", prop: "totalTimes", valueType: "s" },
              { title: "剩余可用次数", prop: "remainingTimes", valueType: "s" },

              
              { title: "关联借条ID", prop: "contractInfoId", valueType: "s" },
              {
                title: "流量包状态",
                prop: "status",

                valueType: "s"
              },
              { title: "支付时间", prop: "payTime", valueType: "s" },
              { title: "使用时间", prop: "useDateTime", valueType: "s" },
              { title: "设定过期时间", prop: "expiryDateTime", valueType: "s" },
              { title: "退款完成时间", prop: "refundTime", valueType: "s" }
            ];
        let dataSource = res.data.records.map(item => {
          return {
            ...item,
            status:
              item.status == "PAID"
                ? "待使用(已支付)"
                : item.status == "USED"
                ? "已使用"
                : item.status == "EXPIRED"
                ? "已过期退款"
                : "",
            payTime: item.payTime || "",
            useDateTime: item.useDateTime || "",
            expiryDateTime: item.expiryDateTime || "",
            refundTime: item.refundTime || "",
            orderPayPrice: item.orderPayPrice / 100
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "流量包管理",
          isSheet: true
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message.warring("导出操作失败,请重试");
        this.exportLoading = false;
      }
    }
  }
};
</script>
<style scoped lang='scss'>
::v-deep .row {
  div {
    text-align: left;
  }
}
</style>
